/*
  Alameda Survey Insights dashboard styles.
  This file contains layout, KPI cards, chart containers, and responsive utility styles.
*/

*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,sans-serif}
.dash{background:#f5f7fa;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-height:100vh}
.tab-bar{background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:0;padding:0 16px;flex-shrink:0;overflow-x:auto}
.tab-bar-title{font-size:13px;font-weight:600;color:#185FA5;padding:12px 16px 12px 0;margin-right:8px;border-right:1px solid #e5e7eb;white-space:nowrap}
.tab{font-size:12px;color:#6b7280;padding:12px 14px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all 0.15s;-webkit-user-select:none;user-select:none;border:none;background:none}
.tab:hover{color:#185FA5}
.tab.active{color:#185FA5;border-bottom:2px solid #185FA5;font-weight:500}
.filters-row{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap;margin-left:auto}
.tab-filter-wrap{display:flex;align-items:center;gap:8px;padding:0}
.tab-filter-label{font-size:11px;color:#4b6280;white-space:nowrap}
.tab-filter-select{font-size:12px;color:#1a1a2e;border:1px solid #cfd8e3;border-radius:6px;background:#fff;padding:6px 8px}
.dash-inner{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column}
.top-bar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.dash-title{font-size:15px;font-weight:500;color:#1a1a2e}
.dash-sub{font-size:12px;color:#6b7280;margin-top:2px}
.coc-band{background:#185FA5;border-radius:8px;padding:8px 14px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.coc-name{font-size:13px;font-weight:500;color:#fff}
.coc-year{font-size:11px;color:rgba(255,255,255,0.75)}
.kpi-row{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.kpi-main{background:#185FA5;border-radius:12px;padding:20px 16px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.kpi-main-icon{font-size:22px;color:rgba(255,255,255,0.6);margin-bottom:6px}
.kpi-main-label{font-size:11px;color:rgba(255,255,255,0.75);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.kpi-main-value{font-size:40px;font-weight:500;color:#fff;line-height:1;margin-bottom:6px}
.kpi-main-sub{display:flex;align-items:center;gap:8px;justify-content:center}
.kpi-main-pct{font-size:12px;color:rgba(255,255,255,0.9);font-weight:500}
.kpi-main-share{font-size:11px;color:rgba(255,255,255,0.6)}
.kpi-secondary{background:#fff;border-radius:12px;padding:18px 16px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid #B5D4F4}
.kpi-sec-icon{font-size:18px;color:#185FA5;margin-bottom:5px;opacity:.7}
.kpi-sec-label{font-size:11px;color:#0b4763;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px}
.kpi-sec-value{font-size:30px;font-weight:500;color:#168cc2;line-height:1;margin-bottom:5px}
.kpi-sec-pct{font-size:12px;font-weight:500;color:#0b4763}
.kpi-sec-share{font-size:11px;color:#0b4763}
.section-label{font-size:11px;font-weight:500;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.section-label::after{content:'';flex:1;height:.5px;background:#e5e7eb}
.trend-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px;margin-bottom:12px}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.chart-title{font-size:13px;font-weight:500;color:#1a1a2e}
.chart-n{font-size:10px;font-weight:500;color:#6b7280;margin-left:4px}
.legend{display:flex;gap:14px;flex-wrap:wrap}
.leg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:#6b7280}
.leg-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.snap-subpop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.snap-card{border-radius:12px;padding:14px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid #B5D4F4;background:#fff}
.snap-card-icon{font-size:16px;color:#185FA5;opacity:.65;margin-bottom:4px}
.snap-card-label{font-size:10px;color:#4b6280;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.snap-card-value{font-size:22px;font-weight:500;color:#0C447C;line-height:1;margin-bottom:5px}
.snap-share{font-size:11px;color:#378ADD}
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.bar-label{width:150px;flex-shrink:0;font-size:11px;color:#6b7280;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;background:#f3f4f6;border-radius:3px;height:20px}
.bar-fill{height:100%;border-radius:3px;display:block;min-width:36px}
.bar-value{width:44px;flex-shrink:0;text-align:left;font-size:11px;font-weight:700;color:#1a1a2e}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ── Footer ── */
.ft { font-size: 10px; color: #9ca3af; margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; flex-shrink: 0; }
.ft-note { flex-basis: 100%; color: #6b7280; }

/* Utility classes to replace inline styles in markup. */
.flush{margin-bottom:0}
.spacer-12{height:12px}
.kpi-sec-subrow{display:flex;align-items:center;gap:8px;justify-content:center}
.canvas-wrap{position:relative}
.h-180{height:225px}
.h-190{height:238px}
.h-200{height:250px}
.h-220{height:275px}
.h-230{height:288px}
.mb-12{margin-bottom:12px}
.mb-0{margin-bottom:0}

/* Legend color helpers used by static HTML labels. */
.dot-main{background:#168cc2}
.dot-main-dark{background:#116e9a}
.dot-main-darkest{background:#0b4763}
.dot-main-light{background:#8fd0ea}
.dot-main-lightest{background:#d9f1fb}
.dot-accent{background:#F3D05F}
.dot-accent-dark{background:#d6af3d}
.dot-accent-darkest{background:#9b7a1f}
.dot-accent-light{background:#f7e39a}
.dot-accent-lightest{background:#fff6d6}
.dot-gray{background:#888780}
.dot-lightblue-outline{background:#B5D4F4;border:1px solid #85B7EB}

/* Small-screen adjustments for readability and card flow. */
@media (max-width: 960px){
  .kpi-row{grid-template-columns:1fr 1fr}
  .chart-grid{grid-template-columns:1fr}
  .snap-subpop-grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 640px){
  .kpi-row{grid-template-columns:1fr}
  .snap-subpop-grid{grid-template-columns:1fr}
  .bar-label{width:120px}
  .filters-row{width:100%;margin-left:0;justify-content:flex-end;gap:8px;padding-top:6px}
  .tab-filter-wrap{width:auto;justify-content:flex-end}
}